<template>
  <div>
    <div class="goal-count clearfix">
      <div v-for="item in Label" class="count-txt">
        <p class="label">{{ item.value }}</p>
        <p
          class="cor-btn count"
          v-if="item.key == 'updateNumber' && info[item.key] && info[item.key] != 0"
          @click="handelLog(item)">
          {{ info[item.key] }}
        </p>
        <p v-else class="count">{{ info[item.key] || info[item.key] == '0' ? info[item.key] : '-' }}</p>
      </div>
    </div>
    <adjust-log ref="adjustLogRef" />
  </div>
</template>

<script>
  import countOpt from '../opt/countList'
  import adjustLog from './adjustLog.vue'
  export default {
    components: { adjustLog },
    data() {
      return {
        Label: [],
        goalTabs: 'CLUETARGET',
        info: {
          actual: '',
          adjustmentTarget: '',
          buildingName: '',
          diff: '',
          initTarget: '',
          reach: '',
          settingId: '',
          state: '',
          stateStr: '',
          updateNumber: ''
        }
      }
    },
    mounted() {
      this.Label = countOpt('CLUETARGET', 'NUMBER')
    },
    methods: {
      init(data) {
        this.info = null
        this.info = { ...data }
      },
      getCurTab(goalTabs, otherState) {
        this.goalTabs = goalTabs
        this.Label = countOpt(goalTabs, otherState)
      },
      handelLog(data) {
        data.title = '案场目标调整记录'
        data.type = 'case'
        data.settingId = this.info.settingId
        data.curState = this.goalTabs
        this.$refs.adjustLogRef.show(data)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .goal-count {
    background-color: #e6f6ff;
    padding: 10px;
  }
  .count-txt {
    float: left;
    font-size: 12px;
    text-align: center;
    padding: 0 10px;
    width: 11%;
    .count {
      font-size: 20px;
      color: #222;
      font-weight: 700;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .cor-btn {
      cursor: pointer;
      color: #2298ff;
    }
  }
</style>
